<template>
  <div>
    <h1>App</h1>
    <button id="box" @click="handleClick">{{ count }}</button>
  </div>
</template>

<script>
import { ref, watchEffect } from "vue";

export default {
  setup() {
    const count = ref(10);

    const handleClick = () => {
      count.value++;
      count.value++;
      count.value++;
      count.value++;
    };

    /**
     * watchEffect()
     *
     * 第一个参数：effect 副作用函数
     *    1. 默认会触发一次，且在异步之前将用到的响应式数据收集为依赖项，这些依赖项发生变化时
     *      会引起再次的执行
     *    2. effect 接受一个 cleanup 清理函数
     *      注册该清理函数，传递一个函数给它，该函数会在下一次 effect 执行之前执行
     *
     * 第二个参数：可选的配置
     *    1. flush
     *
     */
    watchEffect(
      (onCleanup) => {
        // effect 函数【副作用函数】
        console.log("effect", count.value);
        console.log(document.querySelector("#box").innerHTML);

        onCleanup(() => {
          console.log("cleanup");
        });
      },
      {
        immediate: false, // 没有
        deep: true, // 没有
        flush: "post",
      }
    );

    return {
      count,
      handleClick,
    };
  },
};
</script>
